{layout name="layout" /}
{load href="/static/js/laydate/laydate.js" /}
<div class="row">
    <div class="col-xs-12 col-md-4 col-md-offset-4">        
        <form class="form-horizontal col-xs-12"  action="{:url('');}"  method="post">
            <div class="form-group">
                <label for="input_plan_str" class="cos-xs-3 control-label">目标名称</label>
                <div class="cos-xs-9">
                    <input name="plan_str" type="text" class="form-control" id="input_plan_str" placeholder="目标名称">
                </div>
            </div>
            <div class="form-group">
                <label for="plan_time_id" class="cos-xs-3 control-label">计划完成日期</label>
                <div class="cos-xs-9">
                    <input id="plan_time_id" name="plan_time" type="text" class="form-control layui-input"  placeholder="yyyy年MM月dd日" lay-key="12">
                </div>
            </div>
            <div class="form-group">
                <label for="cycle" class="cos-xs-3 control-label">周期</label>
                <div class="cos-xs-9">
                    <select id="cycle" name="cycle"  class="form-control">
                        <option value="0">不循环</option>
                        <option value="1" >每天</option>
                        <option value="7" >每周</option>
                        <!--<option value="30" >每月</option>-->
                    </select>
                </div>
            </div>
            <div class="form-group">
                <div class="cos-xs-offset-3 cos-xs-6 m-t-sm" >
                    <button id="submit" type="submit" class="btn btn-default" style="width: 80%;margin-left: 10%" >添加</button>
                </div>
            </div>
        </form>
    </div>
</div>
<script>
    $ (function ()
    {
        laydate.render ({
            elem: '#plan_time_id'
            , format: 'yyyy年MM月dd日'
        });
        $ ("#captcha").on ('click', function ()
        {
            let img_src = $ (this).attr ('src') + "?seed=" + Math.random;
            $ (this).attr ('src', img_src);
        });
        function error_layer (msg)
        {
            layer.open ({
                content: msg,
                btn: '关闭',
                yes: function ()
                {
                    layer.closeAll ();
                }
            });
        }

        function success_layer (msg)
        {
            layer.open ({
                content: msg,
                btn: '关闭',
                yes: function ()
                {
                    layer.closeAll ();
                    location.href = "{:merge_url('plan/plan_list')}";
                }
            });
        }

        $ ("#submit").on ('click', function (eve)
        {
            eve.preventDefault ();
            let url = $ ('form').attr ('action');
            let data = $ ('form').serialize ();
            $.ajax ({
                url: url,
                data: data,
                type: 'post',
                success: function (res)
                {
                    success_layer (res.msg);
                },
//                statusCode: {403: function (res)
//                    {
//                        console.log(res);
//                        error_layer (res.msg);
//                    }
//                }
                error: function (res)
                {
                    error_layer (res.responseJSON.msg);
                }
            });
        });
    });

</script>